<template lang="html">
  <div class="home">
    <v-parallax height="240"><img src="@/assets/images/group.png" alt=""></v-parallax>
    <v-container>
      <h3>日常工作</h3>
      <v-content class="daily-work">
        <v-btn color="#f3f3f7"><img src="@/assets/images/8.png" alt="">巡检任务</v-btn>
        <v-btn color="#f3f3f7" @click="goList('WDM.ProblemReport')"><img src="@/assets/images/7.png">问题上报</v-btn>
      </v-content>
      <h3>设备维护</h3>
      <v-content class="equipment-maintenance">
        <v-container fluid>
          <v-layout row wrap justify-center align-center>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/1.png" alt="" @click="goList('WDM.IntelligentStreetLamp')"><div>智慧路灯</div></v-flex>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/2.png" alt="" @click="goList('WDM.WisdomManholeCover')"><div>智慧井盖</div></v-flex>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/3.png" alt="" @click="goList('WDM.IntelligentFloodPrevention')"><div>智慧防/排洪</div></v-flex>
          </v-layout>
          <v-layout row wrap justify-center align-center>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/4.png" alt="" @click="goList('WDM.IntelligentGas')"><div>智慧燃气</div></v-flex>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/5.png" alt="" @click="goList('WDM.IntelligentFire')"><div>智慧消防</div></v-flex>
            <v-flex xs4 class="equipment-item" color="#FFF"><img src="@/assets/images/6.png" alt="" @click="goList('WDM.WisdomGreen')"><div>智慧绿化</div></v-flex>
          </v-layout>
        </v-container>
      </v-content>
      <h3>学习与分享 <span @click="goList('HR.Share')">更多<v-icon>fa-angle-double-right</v-icon></span></h3>
      <v-content class="share">
        <v-layout>
          <v-list three-line>
            <template v-for="(item, index) in items">
              <div @click="goDetail(item)">
                <v-list-tile
                  :key="item.FId"
                  avatar>

                  <v-list-tile-content>
                    <v-list-tile-title v-html="item.FTitle"></v-list-tile-title>
                    <v-list-tile-sub-title v-html="item.FContent"></v-list-tile-sub-title>
                  </v-list-tile-content>
                  <v-list-tile-avatar>
                    <img :src="`${baseUrl}/api/Ecp.Picture.view.img?pictureId=${item.FCover}`">
                  </v-list-tile-avatar>
                </v-list-tile>

                <v-divider
                  v-if="index < items.length - 1"
                  :inset="true"
                  :key="index"></v-divider>
              </div>
            </template>
          </v-list>
        </v-layout>
      </v-content>
    </v-container>
  </div>
</template>

<script>
Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
}

import {entityList} from "@/api"
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      entityList.getListDataByPost("HR.Share.List", {
        unitCode: "HR.Share",
        listId: "9005b1b7-6839-4f68-a008-cd58be13e4de",
        unitId:"fcc142a3-037d-40cb-aeef-dea7ac498f6e"
      }).then((res) => {
        this.items = []
        this.items = res.data.records
      })
    },
    goDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          FId: item.FId
        }
      })
    },
    goList(pageCode) {
      let query = {}
      switch (pageCode) {
        case 'WDM.ProblemReport':
          query = {
            pageCode: pageCode,
            listId: "7388c503-76d3-432b-9a6f-0ffbc916c4bd",
            unitId: "4b2e70e3-5c67-4242-a5de-61ed5ace9c0d"
          }
          break
        case 'WDM.IntelligentStreetLamp':
          query = {
            pageCode: pageCode,
            listId: "bb1e7b07-3e19-4928-af61-178c72d01da0",
            unitId: "aecf6aa5-696f-4620-b9f7-0d43ea0df108"
          }
          break
        case 'WDM.WisdomManholeCover':
          query = {
            pageCode: pageCode,
            listId: "03bf68e5-be05-4485-a386-3bff7d4e6a47",
            unitId: "609dcb89-ed86-4da7-8d05-13ee4aca9197"
          }
          break
        case 'WDM.WisdomGreen':
          query = {
            pageCode: pageCode,
            listId: "c34500ce-6294-4117-9463-e8185c10506a",
            unitId: "170ffb8c-eefd-47f7-b9f4-00bb9595a92f"
          }
          break
        case 'WDM.IntelligentFloodPrevention':
          query = {
            pageCode: pageCode,
            listId: "40db6e77-85d9-4e01-a6bc-890a60e3f7ea",
            unitId: "e987130f-3a63-4742-9219-191cf70278ec"
          }
          break
        case 'WDM.IntelligentFire':
          query = {
            pageCode: pageCode,
            listId: "49a786aa-0919-45cf-8851-cdd7bd123de5",
            unitId: "90809c83-a3d0-473c-8db7-85dfeabcc35d"
          }
          break
        case 'WDM.IntelligentGas':
          query = {
            pageCode: pageCode,
            listId: "df0ef272-ade2-48f2-945a-7d0e2ce996cf",
            unitId: "c22e4e74-d194-40c9-9606-a6a26021d07f"
          }
          break
        case 'HR.Share':
          query = {
            pageCode: pageCode,
            listId: "9005b1b7-6839-4f68-a008-cd58be13e4de",
            unitId:"fcc142a3-037d-40cb-aeef-dea7ac498f6e"
          }
          break
      }
      this.$router.push({
        path: "/list",
        query: query
      })
    }
  }
}
</script>

<style lang="scss">
.home {
  .v-parallax__content {
    padding: 0;
  }

  h3 {
    margin-bottom: 10px;
    position: relative;

    span {
      position: absolute;
      right: 0;
      top: 3px;
      font-size: 12px;
      font-weight: 400;
      color: rgb(153, 153, 153);

      i {
        font-size: 14px;
        height: 14px;
        width: 14px;
      }
    }
  }

  .daily-work {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    button {
      height: 56px;
      width: 45%;
      margin: 2.5%;
    }
  }

  .equipment-maintenance {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .equipment-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      img {
        margin-bottom: 10px;
      }
    }
  }

  .share {
    .v-list {
      width: 100%;

      .v-avatar {
        border-radius: 4px;

        img {
          border-radius: 4px;
        }
      }

      .v-divider--inset:not(.v-divider--vertical), .v-divider--inset:not(.v-divider--vertical) {
        margin-left: 0;
        max-width: 100%;
      }
    }
  }
}
</style>
